<template>
  <div class="wind-login-form">
    <!-- 顶部䣌logo区域 -->
    <div class="wind-logo">
      <img :src="logoSvg" alt="logo" />
    </div>
    <!-- 中间的登录界面 -->
    <div class="wind-login-content">
      <div class="wind-login-main">
        <div class="wind-login-system-title">风旅网管理后台</div>
        <el-form>
          <el-form-item class="form-upper-1">
            <el-input v-model="loginUser.userName" placeholder="请输入用户名" clearable>
              <template #prefix>
                <el-icon class="el-input__icon"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="form-upper-2">
            <el-input v-model="loginUser.password" :maxlength='16'  :type="isShowPassword ? 'password': 'text'" placeholder="请输入密码">
              <template #prefix>
                <el-icon class="el-input__icon"><Unlock /></el-icon>
              </template>
              <template #suffix>
                <el-icon @click="isShowPassword = !isShowPassword" class="el-input__icon cursor-pointer"><View /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="form-upper-3">
            <el-button @click="login(loginUser, submitLoading)" :loading="submitLoading.status" class="wind-login-button-submit" round type="primary">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="PageLogin">
import logoSvg from '@/assets/images/wind-logo.svg';
import { reactive, ref } from 'vue';
import { AccountType, login, LoginUser } from '@/pages/Login/login_operate';
import { Loading } from '@/global';

const loginUser = reactive<LoginUser>({ userName: '', password: '', accountType: AccountType.UserName });
const isShowPassword = ref<boolean>(true);
const submitLoading = reactive<Loading>({ status: false });
</script>
<style lang="scss" scoped>
.wind-login-form{
  height: 100%;
  width: 100%;
  position: relative;
  background: linear-gradient(330deg, #409EFF, #d9ecff);
  .wind-logo{
    position: absolute;
    top: 20px;
    left: 20px;
    img{
      height: 44px;
    }
  }
  .wind-login-content{
    @include absolute-center();
    background: #FFFFFF44;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    padding: 20px 80px;
    border-radius: 5px;
    .wind-login-main{
      @for $i from 1 through 4 {
        .form-upper-#{$i} {
          visibility: hidden;
          animation-name: animate-upper-opacity;
          animation-duration: 0.5s;
          animation-fill-mode: forwards;
          animation-delay: calc($i/10) + s;
        }
      }
      .wind-login-system-title{
        font-size: 22px;
        color: #303133;
        letter-spacing: 4px;
        font-weight: 500;
        text-align: center;
        margin: 15px 0 30px
      }
      .wind-login-button-submit{
        width: 100%;
        letter-spacing: 2px;
        font-weight: 300;
        margin-top: 15px;
      }
    }
  }
}
</style>
